<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- 点击按钮，传递显示数据 -->
<button id="btn" onclick="func('数据更新成功')">btn</button>

<input type="button" value="Showbo.Msg.alert" onclick="Showbo.Msg.alert('您好，请先注册或登录!')"/>
<input type="button" value="Showbo.Msg.confirm" onclick="Showbo.Msg.confirm('您确定删除这条记录吗？')"/>

<!-- 显示的时间弹窗的div -->
<div id="date"></div>
<select name="bbxb" id="selecte" class="shortselect">
    <option value="">---请选择--</option>
    <option value="0" selected="selected">男</option>
    <option value="1">女</option>
</select>

<div class="aaa" style="height: 100px; width: 300px; background-color: #25baf1; overflow-x: scroll; overflow-y: hidden;writing-mode:vertical-rl;">
    <div style = "display: inline-block; height:60px; width: 80px ; background-color: black">1</div>
    <div style = "display: inline-block; height:60px; width: 80px ; background-color: white">1</div>
    <div style = "display: inline-block; height:60px; width: 80px ; background-color: green">1</div>
    <div style = "display: inline-block; height:60px; width: 80px ; background-color: blue">1</div>
    <div style = "display: inline-block; height:60px; width: 80px ; background-color: black">1</div>

</div>
</body>
<style>
    .aaa::-webkit-scrollbar {
        /*滚动条宽*/
        width: 4px;
    }
    .aaa::-webkit-scrollbar-thumb {
        /*正在滑动的小块*/
        border-radius: 40px;
        background-color: #CFCFCF;
    }

    .aaa::-webkit-scrollbar-track {
        /*滚动内部轨道*/
        box-shadow: inset 0 0 5px rgb(2, 109, 173);
        background: rgb(2, 109, 173);
        border-radius: 10px;
    }
    .shortselect{
        background:#fafdfe;
        height:28px;
        width:180px;
        line-height:28px;
        border:1px solid #9bc0dd;
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
    }
</style>
<script>


    function func(alertData){
        // 创建一个div
        var layer=document.createElement("div");
        // 设置div的id值
        layer.id="layer";

        var style={
            background:"#ccffff",
            borderRadius: "10px",
            position:"absolute",
            width:"150px",
            height:"60px",
            left:"91%",
            top:"10%"
        }
        for(var i in style)
            layer.style[i]=style[i];

        // 当找不到id为layer的控件时
        if(document.getElementById("layer")==null){
            // 在body中添加layer控件（layer在上面创建的）
            document.body.appendChild(layer);
            // 设置显示类容
            layer.innerHTML=alertData;
            // 将div中文本居中
            layer.style.textAlign="center";
            layer.style.lineHeight="60px"; // 作用是调节字体行高与div同高，使其保持水平居中
            // 设置3s后去掉弹出窗
            setTimeout("document.body.removeChild(layer)",3000)
        }
    }

    // 下面是计时控件js
    change();
    function change(){
        var today;
        today = new Date();
        timeString = today.toLocaleString();
        document.getElementById("date").innerHTML = timeString;
        setTimeout("change();", 100);
    }
</script>
</html>